<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易版字典 (自己找接口)</title>
</head>

<body>
  <input type="text" placeholder='在 input 框输入文字, 且只能输入一个字返回他的 "拼音" , "部首", "笔画"' style="width: 500px;">
  <button>qignqiu1</button>
  <script>
    var btn = document.querySelector('button')
    btn.onclick = () => {
      var inp = document.querySelector('input')
      var val = inp.value
      var xhr = new XMLHttpRequest()
      xhr.open('GET', 'https://apis.tianapi.com/xhzd/index?key=f91ff265d7a7bbed6de9d34babf5abcf&word=' + val)
      xhr.send()
      xhr.onreadystatechange = function () {
        inp.value = ''
        if (xhr.readyState == 4 && xhr.status == 200) {
          var obj = JSON.parse(xhr.responseText)
          console.log(obj)
          var data = obj.result.list
          var getdata = []
          data.map((itme, index) => {
            getdata.push({
              py: itme.py,
              bs: itme.bushou,
              bh: itme.bihua
            })
          })
          console.log(getdata)
          alert(inp.value + ' 的拼音是：' + getdata[0].py + ' 部首是：' + getdata[0].bs + ' 笔画是：' + getdata[0].bh)
        }
      }
    }
  </script>
</body>

</html>